Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / interfaces / ExpandingSection.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD AND MIT -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"bg-white rounded-sm shadow-sm divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900 overflow-hidden"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"flex p-2 justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-zinc-800"

@Te6edf3click=Ta5d6ff"isExpanded = !isExpanded"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"my-auto mr-auto"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"font-bold dark:text-white"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"title" Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm text-gray-600 dark:text-gray-300"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"subtitle" Tff7b72/>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"my-auto ml-2"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200"

Te6edf3:class=Ta5d6ff"{ 'rotate-90': isExpanded }"

Tff7b72>

Tff7b72<svg Te6edf3xmlns=Ta5d6ff"http://www.w3.org/2000/svg" Te6edf3viewBox=Ta5d6ff"0 0 256 256" Te6edf3class=Ta5d6ff"size-5"Tff7b72>

Tff7b72<rect Te6edf3width=Ta5d6ff"256" Te6edf3height=Ta5d6ff"256" Te6edf3fill=Ta5d6ff"none" Tff7b72/>

Tff7b72<path

Te6edf3d=Ta5d6ff"M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"

Te6edf3fill=Ta5d6ff"currentColor"

Tff7b72/>

Tff7b72</svg>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"isExpanded" Te6edf3class=Ta5d6ff"divide-y divide-gray-200 dark:text-white"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"content" Tff7b72/>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "ExpandingSection",

data() {

return {

isExpanded: false,

};

},

};

Tff7b72</script>